<template>
	<view class="wallet-box">
		<view class="top-bg"><u--image :src="shopMallImgUrl+'wallet_head_bg.png'" width="750rpx"
				height="874rpx"></u--image>
		</view>
		<view class="head">
			<view class="back" @click="backPage">
				<u-icon name="arrow-left" color="#fff" size="22"></u-icon>
			</view>
			<view class="head-title">
				我的钱包
			</view>
		</view>
		<view class="wall-content">
			<view class="wall-plate-one">
				<view class="top-tip">
					<u--image :src="shopMallImgUrl+'wallet_top_bg.png'" width="690rpx" height="96rpx"></u--image>
					<!-- <view class="tip-text">成为商家，赚更多优惠补贴</view> -->
					<view class="tip-text">我的资产</view>
				</view>
				<view class="total-box">
					<view class="wallet-money">
						<view class="tip">资产总览(元)</view>
						<view class="total">
							<text class="main">{{money_count.main}}</text>
							<text class="sub">.{{money_count.sub}}</text>
						</view>
					</view>
					<view class="wallet-type">
						<view class="item">
							<view class="text" @click="toPage('/pages/user/my-withdrawal')">可提现余额 <u-icon name="arrow-right"></u-icon></view>
							<view class="num">
								<text class="main">{{walletInfo.goodsMoney}}</text>
								<!-- <text class="sub">.00</text> -->
							</view>
						</view>
						<view class="item">
							<view class="text">消费券</view>
							<view class="num">

								<text class="main">{{walletInfo.coupon}}</text>
								<!-- <text class="sub">.00</text> -->
							</view>
						</view>
					</view>
					<view class="cashout-btn" @click="toPage('/pages/user/my-withdrawal')">
						提现
					</view>
				</view>
				<!-- <view class="top-tip">
					<u--image :src="shopMallImgUrl+'wallet_top_bg.png'" width="690rpx" height="96rpx"></u--image>
					<view class="tip-text">成为商家，赚更多优惠补贴</view>
				</view>
				<view class="top-item">
					<view class="title1">资产总览(元)</view>
					<view class="title2">{{
				  Number((walletInfo && walletInfo.totalAmount) || 0) +
				  Number(cashFee || 0) +
				  Number(mallFee || 0)
				}}</view>
					<view class="money-tip">跨界收入仅作为商城券在商城使用</view>
					<view class="Withdrawal-btn" @click="toPage('/pages/user/my-withdrawal')">提现</view>
				</view>

				<view class="xfbox">
					<view class="xfbox-item">
						<view class="xfbox-item-title">
							消费券<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="xfbox-item-money">
							0
						</view>
					</view>
					<view class="xfbox-item">
						<view class="xfbox-item-title">
							消费积分<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="xfbox-item-money">
							0
						</view>
					</view> -->
			</view>

			<!-- 		<view class="c-tab">
				<view class="td-li"
					@click="toPage('/pages/user/my-goodsFee-detail?fee=' +((walletInfo && walletInfo.currentGoodsFee) || ''))">
					<view class="n-title"><text class="grid-text1">货款</text><u-icon name="arrow-right"></u-icon>
					</view>

					<!-- <text class="grid-text3">{{(walletInfo && walletInfo.currentGoodsFee) || "0.00"}}</text> --
				</view>
				<view class="td-li"
					@click="toPage('/pages/user/transboundary-detail?fee=' +((walletInfo && walletInfo.currentServiceFee) || ''))">
					<view class="n-title"><text class="grid-text1">跨界收入（商城券）</text><u-icon name="arrow-right"></u-icon>
					</view>

					<!-- <text class="grid-text3">{{(walletInfo && walletInfo.currentServiceFee) || "0.00"}}</text> --
				</view>
				<view class="td-li" @click="toPage('/pages/user/preferential-detail')">
					<view class="n-title"><text class="grid-text1">优惠补贴</text><u-icon name="arrow-right"></u-icon>
					</view>

					<!-- <text class="grid-text3">{{walletInfo.currentSubsidyFee || "0.00"}}</text> --
				</view>


			</view> -->
		</view>

		<view class="point-box">
			<view class="item">
				<view class="text">货款 <!-- <u-icon size="1em" name="arrow-right"></u-icon> --></view>
				<view class="num">

					<text class="main">{{walletInfo.goodsMoney}}</text>
					<!-- <text class="sub">.00</text> -->
				</view>
			</view>
			<view class="item">
				<view class="text">费率补贴 <!-- <u-icon size="1em" name="arrow-right"></u-icon> --></view>
				<view class="num">

					<text class="main">{{walletInfo.NormalSubsidy}}</text>
					<!-- <text class="sub">.00</text> -->
				</view>
			</view>
			<view class="item">
				<view class="text">补贴积分 <!-- <u-icon size="1em" name="arrow-right"></u-icon> --></view>
				<view class="num">

					<text class="main">{{walletInfo.SubsidyPoints}}</text>
					<!-- <text class="sub">.00</text> -->
				</view>
			</view>
			<view class="item">
				<view class="text_n">
					<view class="text_n_left">
						贡献值（跨界收入）
					</view>
					<view class="text_n_right"><!-- <u-icon size="1em" name="arrow-right"></u-icon> --></view>
				</view>
				<view class="num" style="display: flex;flex-direction: row;justify-content: flex-start;">
					<text class="main">{{walletInfo.contribute}}</text>
					<!-- <text class="sub">.00</text> -->
					<view class="activation-btn" style="margin-left: 20rpx;" @click="goPage">激活</view>
				</view>
			</view>
		</view>
		<view class="detail-box">
			<view class="title">收支明细</view>
			<!-- 
			<view class="box1" @click="toPage('/pages/user/my-withdrawal')">
					<view class="item"><u--image :src="img1" width="30px" height="30px"></u--image><text
							class="tx">提现</text></view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			-->
			<!-- <view class="box1" @click="toPage('/pages/user/my-wallet-list')">
				<view class="item"><text class="tx">资产总记录</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
			<!-- <view class="box1"
				@click="toPage('/pages/user/my-goodsFee-detail')">
				<view class="item"><text class="tx">货款记录</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
			<view class="box1"
				@click="toPage('/pages/user/NormalSubsidy-detail')">
				<view class="item"><text class="tx">费率补贴记录</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="box1"
				@click="toPage('/pages/user/subsidyPoints-detail')">
				<view class="item"><text class="tx">补贴积分记录</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="box1"
				@click="toPage('/pages/user/transboundary-detail')">
				<view class="item"><text class="tx">贡献值记录（跨界收入）</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="box1" @click="toPage('/pages/user/preferential-detail')">
				<view class="item"><text class="tx">消费券记录</text></view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view style="height: 20px;"></view>
	</view>


	</view>
</template>

<script>
	import {
		shopMallImgUrl
	} from "@/common/config.js"
	import {
		getStoreData,
		setStoreData,
		httpGet
	} from "@/utils/http.js";
	import {
		money_split
	} from "@/utils/money_split";
	const img1 = require(`@/img/my/bank-icon.png`);
	const img2 = require(`@/img/my/oll-tab-bar.png`);
	export default {
		data() {
			return {
				img1,
				img2,
				walletInfo: {
					// currentGoodsFee: 0,
					// currentSubsidyFee: 0,
					// historyServiceFee: 0,
					goodsMoney:0,//货款
					coupon:0,//消费券
					NormalSubsidy:0,//费率补贴
					SubsidyPoints:0,//补贴积分
					contribute:0//贡献
				},
				cashFee: "",
				mallFee: "",
				shopMallImgUrl: shopMallImgUrl
			};
		},
		onShow() {
			if (getStoreData("refresh")) {
				// this.walletArrFun();
				// this.myWallet();
				// this.myWallteData();
				setStoreData("refresh", false);
			}
		},
		onLoad(options) {
			if (getStoreData("refresh")) {
				setStoreData("refresh", false);
			}
			//货款
			this.getMONEY("MONEY");
			//消费券
			this.getCONSUME("CONSUME");
			//费率补贴
			this.getNormalSubsidy();
			//补贴积分
			this.getButieJifen("INTEGRAL_STORE");
			//贡献值
			this.getGongxian("INTEGRAL_ADD_STORE");
			//this.myWallet();
			//this.myWallteData();
		},
		computed: {
			money_count() {
				return money_split(Number(this.walletInfo.goodsMoney) +
					Number(this.walletInfo.coupon) +
					Number(this.walletInfo.NormalSubsidy)+
					Number(this.walletInfo.SubsidyPoints)+
					Number(this.walletInfo.contribute))
			}
		},
		methods: {
			getMONEY(type){
				const _this = this;
				httpGet("/api/union/store/wallet/"+type)
					.then((res) => {
						if (res.data) {
							_this.walletInfo.goodsMoney=res.data.currentAmount;
						}
				
					})
					.catch((e) => {
						//
					});
			},
			getCONSUME(type){
				const _this = this;
				httpGet("/api/union/store/wallet/"+type)
					.then((res) => {
						if (res.data) {
							_this.walletInfo.coupon=res.data.currentAmount;
						}
				
					})
					.catch((e) => {
						//
					});
			},
			getNormalSubsidy(){
				const _this = this;
				httpGet("/api/union/store/queryNormalSubsidy")
					.then((res) => {
						_this.walletInfo.NormalSubsidy=res.data.currentAmount;
					})
					.catch((e) => {
						//
					});
			},
			getButieJifen(type){
				const _this = this;
				httpGet("/api/union/store/wallet/"+type)
					.then((res) => {
						if (res.data) {
							_this.walletInfo.SubsidyPoints=res.data.currentAmount;
						}
				
					})
					.catch((e) => {
						//
					});
			},
			getGongxian(type){
				const _this = this;
				httpGet("/api/union/store/wallet/"+type)
					.then((res) => {
						if (res.data) {
							_this.walletInfo.contribute=res.data.currentAmount;
						}
				
					})
					.catch((e) => {
						//
					});
			},
			toPage(v) {
				setStoreData("cashValObj", {
					分账补贴: (this.walletInfo && this.walletInfo.currentGoodsFee) || 0,
					优惠补贴: (this.walletInfo && this.walletInfo.currentSubsidyFee) || 0,
					消费券: (this.walletInfo && this.walletInfo.historyServiceFee) || 0,
					零钱: this.cashFee || 0,
				});
				uni.navigateTo({
					url: v,
				});
			},
			myWallteData() {
				const _this = this;
				httpGet("/api/userwallet/info")
					.then((res) => {
						_this.mallFee = res.data.currentMallFee;
					})
					.catch((e) => {
						//
					});
			},
			myWallet() {
				const _this = this;
				httpGet("/api/usercashwallet/info")
					.then((res) => {
						_this.cashFee = res.data.cashFee;
					})
					.catch((e) => {
						//
					});
			},
			walletArrFun(type) {
				const _this = this;
				httpGet("/api/union/store/wallet/"+type)
					.then((res) => {
						if (res.data) {
							_this.walletInfo = res.data;
						}

					})
					.catch((e) => {
						//
					});
			},
			backPage() {
				uni.navigateBack();
			},
			goPage(){
				uni.navigateTo({
					url: "/pages/user/activation",
				});
			}
		},
	};
</script>
<style lang="scss">
	.total-box {
		margin: 0 30rpx 0;
		padding: 30rpx 0;
		background: #ffffff;
		box-shadow: 0px 0px 6px 0px rgba(79, 79, 79, 0.1);
		border-radius: 0 0 16rpx 16rpx;

		.wallet-money {
			display: flex;
			flex-direction: column;

			.total {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				border-bottom: 1px solid #eee;
				text-align: center;
				margin: 0 30rpx;
				padding-bottom: 20rpx;


				.main {
					font-size: 72rpx;
					font-weight: bold;
					letter-spacing: .03em;
					margin-left: -.3em;
				}

				.sub {
					font-size: 40rpx;
					font-weight: bold;
					letter-spacing: .08em;
					padding-bottom: .2em
				}

			}

			.tip {
				font-size: 32rpx;
				margin: 10rpx 0;
				font-weight: bold;
				text-align: center;
			}
		}

		.wallet-type {

			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0 0;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;
				border-left: 1px solid rgba(0, 0, 0, .08);
				

				&:first-of-type {
					border-left: 0;
				}

				.num {
					margin: 20rpx 0 0;

					.main {

						font-size: 40rpx;
					}

					.sub {

						font-size: 32rpx;
					}
				}

				.text {
					font-size: 28rpx;
					color: #333;
					white-space: nowrap;
					display: flex;
					align-items: center;
				}
			}

		}

		.cashout-btn {

			background: linear-gradient(90deg, #FE5757, #FE9357);
			padding: 24rpx 32rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 999px;
			width: 60%;
			margin: 30rpx auto 0;
			transition: .2s;

			&:active {
				filter: brightness(90%);
			}
		}
	}

	.point-box {

		display: flex;
		align-items: center;
		justify-content: center;
		margin: -40rpx 30rpx 0;
		position: relative;
		z-index: 9;
		padding: 36rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
		border-radius: 8px;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			border-left: 1px solid rgba(0, 0, 0, .08);
			.text_n{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 24rpx;
				color: #333;
				opacity: .6;
				white-space: nowrap;
				display: flex;
				align-items: center;
				text-align: center;
				.text_n_left{
					.bottom-text{
						font-size: 20rpx;
					}
				}
			}

			&:first-of-type {
				border-left: 0;
			}

			.num {
				margin: 10rpx 0 0;

				.main {

					font-size: 36rpx;
				}

				.sub {

					font-size: 28rpx;
				}
			}

			.text {
				font-size: 24rpx;
				color: #333;
				opacity: .6;
				white-space: nowrap;
				display: flex;
				align-items: center;

				.u-icon {
					margin-top: 2rpx;
				}
			}
		}

	}

	.detail-box {
		padding: 30rpx;
		background: #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		margin: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.box1 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #f6f6f6;

			&:last-of-type {
				border-bottom: 0;
			}
		}
	}

	.wallet-box {
		background: #f2f2f2;
		min-height: 100vh;
		position: relative;

		.item-box {
			padding-bottom: 24px;
		}

		.box {
			width: 100%;
			margin-top: 8px;
			color: #333;

			.item {
				display: flex;
				align-items: center;

				.tx {
					margin-left: 12px;
				}
			}

			.box1 {
				background: #fff;
				padding: 6px 12px;
				border-radius: 4px;
				margin: 16px 16px 0 16px;
				display: flex;
				height: 44px;
				justify-content: space-between;
				align-items: center;
			}
		}

		.top-bg {
			width: 100%;

		}

		.top-item {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			width: 690rpx;
			margin-left: 30rpx;
			align-items: center;
			padding: 20px 0;
			background: #ffffff;
			box-shadow: 0px 0px 6px 0px rgba(79, 79, 79, 0.1);
			border-radius: 0 0 16rpx 16rpx;


			.title2 {
				margin-top: 4px;
				margin-bottom: 10rpx;
				font-size: 18px;
				color: #333;
			}

			.money-tip {
				color: #C2C2C2;
				font-size: 24rpx;
			}

			.Withdrawal-btn {
				width: 472rpx;
				line-height: 88rpx;
				background: linear-gradient(to right, #FE9357, #EF684B);
				color: #fff;
				text-align: center;
				border-radius: 88rpx;
				margin-top: 60rpx;
			}

		}
	}

	.n-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.td-li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.grid-text3 {
			color: #333;
		}
	}

	.head {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 0;
		width: 750rpx;
		top: 88rpx;
		position: absolute;
		z-index: 1000;

		.back {
			width: 70rpx;
			display: flex;
			justify-content: center;
		}

		.head-title {
			width: 610rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
		}
	}

	.wall-content {
		width: 750rpx;
		position: absolute;
		top: 200rpx;
		z-index: 1000;
	}

	.top-tip {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;

		.tip-text {
			position: absolute;
			top: 32rpx;
			left: 28rpx;
			color: #591E0D;
			font-weight: bold;
			font-size: 36rpx
		}
	}

	.c-tab-item {
		background-color: #fff;
	}

	.c-tab {
		margin-top: 20rpx;
		width: 690rpx;
		margin-left: 30rpx;
		font-size: 16px;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.grid-text1 {

			font-size: 14px;
			color: #666;
		}

		.grid-text3 {
			margin: 6px 0 0 0;
			color: #333;
		}

		.td-li {
			background-color: #fff;
			padding: 16rpx 20rpx;
		}

		.td-li:nth-child(1) {
			border-bottom-left-radius: 10rpx;
			border-top-left-radius: 10rpx;
		}

		.td-li:nth-child(3) {
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
	}

	.xfbox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 650rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;

		.xfbox-item {
			width: 48%;

			.xfbox-item-title {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-bottom: 20rpx;
			}
		}
	}
	.activation-btn{
		width: 70rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 20rpx;
		background-color: #FE5757;
		color: #fff;
		border-radius: 10rpx;
	}
</style>